<template>
  <div class="examMade">
    <Card style="margin-bottom:20px">
      <Row gutter="40">
        <Form ref="examForm" :model="examForm" :rules="rules">
          <i-col
            span="3"
            style="height:30px; line-height:30px; color:rgba(80, 80, 80, 1); margin-right:-50px;"
          >
            <FormItem>条件筛选：</FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="organization">
              <Cascader change-on-select :data="organizationList" v-model="examForm.organization" placeholder="培训管理机构" clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="theme">
              <Input v-model="examForm.theme" placeholder="培训主题" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem prop="date">
              <DatePicker
                type="daterange"
                v-model="examForm.date"
                placeholder="培训发布起止期"
                :editable="false"
                style="width:100%"
              ></DatePicker>
            </FormItem>
          </i-col>
        </Form>
      </Row>
      <Row style="margin-bottom:15px">
        <Button type="primary" @click="query" :loading="queryLoading">查询</Button>
        <Button type="default" @click="resetForm" style="margin-left:10px;margin-right:10px;">重置</Button>
        <Button type="primary" @click="publishExam">发布培训</Button>
      </Row>
      <div>
        <span>状态：</span>
        <Button :type="btn[0]" @click="buttonClick(0)" class="statusButton">全部</Button>
        <Button :type="btn[1]" @click="buttonClick(1)" class="statusButton statusButton2">无考核</Button>
        <Button :type="btn[2]" @click="buttonClick(2)" class="statusButton">考核未结束</Button>
        <Button :type="btn[3]" @click="buttonClick(3)" class="statusButton">考核已结束</Button>
      </div>
    </Card>
    <Row class="listgroup">
      <div v-for="(item,index) in examType" :key="index">
        <i-col span="6">
          <div class="cardDiv">
            <span>
              <Card style="width:85%;" shadow>
                <div slot="extra">
                  <div
                    :class="item.trainflag=='0'?'cardExtra cardExtra1':(item.trainflag=='1'?'cardExtra cardExtra2':'cardExtra cardExtra3')"
                  >{{item.trainflag=='0'?'无考核':(item.trainflag=='1'?'考核未结束':'考核已结束')}}</div>
                  <div
                    :class="item.trainflag=='0'?'dropright dropright1':(item.trainflag=='1'?'dropright dropright2':'dropright dropright3')"
                  >
                    <Icon type="md-arrow-dropright" />
                  </div>
                </div>

                <div class="cardStyle" @click="examMessage(item)">
                  <div class="cardTitle">{{item.theme}}</div>
                  <div class="cardContent">
                    <div>
                      <Icon type="md-calendar" class="cardIcon" />
                      {{item.maketime?item.maketime.substr(0,10):''}}
                    </div>
                    <div class="cardFile">
                      <Icon type="ios-document" class="cardIcon" v-if="item.filename.length>0" />
                      <span v-else>
                        <br />
                      </span>
                      <span v-for="(item2,index) in item.filename" :key="index">{{item2}}</span>
                    </div>
                    <div v-if="item.trainflag!=='0'">
                      <Icon type="ios-time" class="cardIcon" />
                      {{item.startdate?item.startdate.substr(0,10):''}}至{{item.enddate?item.enddate.substr(0,10):''}}
                    </div>
                    <span v-else>
                      <br />
                    </span>
                  </div>
                </div>
              </Card>
            </span>
            <!-- 这次不上 -->
            <!-- <div class="cardFoot" style="height:40px;background:#fff;padding:0">
              <div style="background-color: #2d8cf0;text-align: center;padding: 0;color: #fff;" v-if="item.trainflag=='0' || item.trainflag=='1'">
                <div>变更培训</div>
              </div>
            </div> -->
            <div class="cardFoot">发起人：{{item.originatorname}}</div>
          </div>
        </i-col>
      </div>
    </Row>
    <div style="margin-right:50px;">
      <Page
        :total="total"
        show-total
        style="text-align:right;margin-top:20px;margin-bottom:30px;"
        @on-change="pageChange"
        :current="pageIndex"
        :page-size="pageSize"
        transfer
      ></Page>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
export default {
  data() {
    return {
      examForm: {
        organization: "",
        theme: "",
        date: ["", ""]
      },
      organizationList: [],
      rules: {
        organization: [{ required: true, message: "培训管理机构不能为空" }]
      },
      queryLoading: false,
      btn: ["primary", "default", "default", "default"],
      // 卡片中数据
      examType: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 12,
      pageObj: "",
      queryClick: 0
    };
  },
  methods: {
    // 重置表单
    resetForm() {
      this.examForm = {
        organization:[]
      }
      this.$refs.examForm.resetFields();
    },

    //查询
    query(index, trainflag) {
      if (trainflag === undefined) {
        let btnCopy = ["primary", "default", "default", "default"];
        this.btn = btnCopy;
      } else {
      }
      this.pageIndex = 1;
      if (index === 999) {
        // 首次进入页面
        let obj = {
          managecom: this.examForm.organization
            ? this.examForm.organization[this.examForm.organization.length-1]
            : null,
          theme: this.examForm.theme ? this.examForm.theme : null,
          startTime: util.dateToISOString(this.examForm.date[0]),
          endTime: util.dateToISOString(this.examForm.date[1]),
          index: this.pageIndex,
          pageSize: this.pageSize,
          trainflag: trainflag === -1 ? null : trainflag
        };
        this.pageObj = obj;
        this.api.selectTrainone(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            this.examType = res.data.records;
            this.total = res.data.total;
          } else {
            this.examType = [];
            this.total = 0;
          }
        });
      } else {
        this.queryClick++;
        if (trainflag === undefined) {
          this.queryLoading = true;
        }
        this.$refs.examForm.validate(valid => {
          if (valid) {
            let obj = {
              managecom: this.examForm.organization
                ? this.examForm.organization[this.examForm.organization.length-1]
                : null,
              theme: this.examForm.theme ? this.examForm.theme : null,
              startTime: util.dateToISOString(this.examForm.date[0]),
              endTime: util.dateToISOString(this.examForm.date[1]),
              index: this.pageIndex,
              pageSize: this.pageSize,
              trainflag: trainflag === -1 ? null : trainflag
            };
            this.pageObj = obj;
            this.api.selectTrainone(obj).then(res => {
              this.queryLoading = false;
              if (res.code == 200 && res.data != null) {
                this.examType = res.data.records;
                if (trainflag === undefined) {
                  this.$Message.info("查询成功");
                }
                this.total = res.data.total;
              } else {
                this.$Message.info(res.msg);
                this.examType = [];
                this.total = 0;
              }
            });
          } else {
            this.queryLoading = false;
          }
        });
      }
    },

    // 分页查询
    pageQuery() {
      this.pageObj.index = this.pageIndex;
      this.api.selectTrainone(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.examType = res.data.records;
          this.total = res.data.total;
        } else {
          this.examType = [];
          this.total = 0;
        }
      });
    },

    // 按钮点击
    buttonClick(index) {
      this.pageIndex = 1;
      let btnCopy = ["default", "default", "default", "default"];
      btnCopy[index] = "primary";
      this.btn = btnCopy;
      if (this.queryClick !== 0) {
        this.query(1, index - 1);
      } else {
        this.query(999, index - 1);
      }
    },

    // 发布培训
    publishExam() {
      this.$router.push({
        name: "publishExam"
      });
    },

    // 培训考核通知
    examMessage(item) {
      let obj = {
        trainflag: item.trainflag,
        trainid: item.trainid
      };
      this.$router.push({
        name: "examMessageDetail",
        query: {
          item: obj
        }
      });
    },

    // 页数改变
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageQuery();
    },

    // 初始化
    initial() {
      // this.api.organizationDict().then(res => {
      //   if (res.code == 200 && res.data != null) {
      //     if (res.data[0].listKeyValueVOS) {
      //       this.organizationList = res.data[0].listKeyValueVOS;
      //     }
      //   }
      // });
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one=>{
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two=>{
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three=>{
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four=>{
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
      this.query(999);
    }
  },
  mounted() {
    this.initial();
  },
  beforeDestroy() {
    this.examForm = null;
    this.organizationList = null;
    this.rules = null;
    this.queryLoading = null;
    this.btn = null;
    this.examType = null;
    this.total = null;
    this.pageIndex = null;
    this.pageSize = null;
    this.pageObj = null;
    this.queryClick = null;
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>

<style>
.ivu-card {
  border-radius: 0px;
}
.examMade .ivu-card-body {
  padding: 16px !important;
}
.cardDiv .ivu-card-extra {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.ivu-card-shadow{
  box-shadow: none;
}
</style>